<template>
  <div class="another-file">
    <div class="title">
      <span>其他文件</span>
      <span v-if="isUploading" style="color:#49cff5;" @click="showUpLoading">
        <span v-if="uploadingbox">上传</span>
      </span>
    </div>
    <!-- 图片太多再改布局 -->
    <div class="file" v-if="uploadingbox">
      <div class="flie_box" v-for="(item, index) in fileImageNew" :key="index">
        <img :src="item.url" alt="" />
      </div>
    </div>
    <!-- 上传图片 -->
    <div class="file" v-else>
      <van-uploader
            v-model="fileImageNew"
            :after-read="headerImageChange"
            multiple 
            show-upload
            preview-full-image
            preview-image
            :before-delete="headerImageDelete"
          />
            <!-- :before-delete="headerImageDelete" -->
      <!-- <van-uploader v-model="fileImage" multiple disabled :deletable="false" preview-full-image preview-image/> -->

      <div style="margin-top:30px;">
        <van-button type="info" size="small" @click="hanldeUpLoad">保存</van-button>
        <van-button type="info" size="small" @click="hanldeCancel" style="margin-left:10px;">取消</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {getCarManagementCCarFileSave,getCarManagementCCarFileDelete} from '../../views/find/findCarManagement/api'
import upload from "@/common/upload.js";
import { Toast } from 'vant';
export default {
  name: "anotherFile",
  props:{
    fileImage:{
      type:Array,
      default:()=>[]
    },
    isUploading:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      uploadingbox:true,
      fileImageNew:[],
      filterImage:[],
      fileImageDelete:[],
      lengthImage:'',
      loadingUp: ''
    };
  },
  methods: {
    showUpLoading(){
      this.uploadingbox = !this.uploadingbox
    },
    // 删除图片
    headerImageDelete(file){
      if (file.id !== undefined) {
        let params = file.id
        this.fileImageDelete.push(params)
      }
      console.log('%c [ this.fileImageDelete ]-67', 'font-size:13px; background:pink; color:#bf2c9f;', this.fileImageDelete)
      this.fileImageNew = this.fileImageNew.filter(item => {
        // return item.url !== file.url
        return item.id !== file.id
      } )
      // this.fileImageNew = arr
      // this.fileImage =  this.fileImage.filter(item => item.url !== file.url )
    },
    /* // 上传头像
    headerImageChange(file) {
      let formData = new FormData();
      formData.append("file", file.file);  
      upload(
        (list) => {
          this.imPicUrl = list.length ? list[0] : ''
        },
        [formData]
      );
    }, */
    // 上传图片
    headerImageChange(file) {
      let formData = new FormData()
      formData.append('file', file.file)
      this.loadingUp = this.$toast.loading({
          message: '上传中...\n请耐心等待',
          forbidClick: true,
          duration: 0,
          overlay: true
        })
      upload((list) => {
        list.map((item, i) => {
          this.fileImageNew.push({
            ...item,
            orderId: this.$route.query.id
          })
          // console.log(this.updataImgArr)
        })
        this.loadingUp.clear()
      }, [formData])
      let arr = this.fileImageNew.filter(item=>{
        return item.content == undefined
      })
      this.fileImageNew = arr 
    },
    // 上传头像
    hanldeUpLoad() {
      this.uploadingbox = true
      /* if (this.imPicUrl !== null && this.imPicUrl !== undefined && this.imPicUrl !== '') {
        this.fileImage.push(this.imPicUrl)
      }*/
      this.fileImage.forEach(item => {
        console.log('%c [ item ]-112', 'font-size:13px; background:pink; color:#bf2c9f;', item)
        this.fileImageNew = this.fileImageNew.filter(value => {
          console.log('%c [ value ]-114', 'font-size:13px; background:pink; color:#bf2c9f;', value)
          return value.id !== item.id
        })
      })
      
      // return
      if (this.fileImageDelete.length > 0) {
        let paramsDelete = [
          ...this.fileImageDelete
        ]
        this.initCarManagementCCarFileDelete(paramsDelete)
        setTimeout(()=>{
          if (this.fileImageNew.length >= this.lengthImage) {
            this.initCarManagementCCarFileSave(this.fileImageNew)
          }
        },1000)
      }else{
        if (this.fileImageNew.length >= this.lengthImage) {
          this.initCarManagementCCarFileSave(this.fileImageNew)
        }
      }
    },
    // 保存图片
    async initCarManagementCCarFileSave(params){
      if(this.fileImageNew.length == 0){
        this.uploadingbox = false
        return Toast('您还未上传照片！请重试！')
      }
      const data = await getCarManagementCCarFileSave(params);
      if (data.code !== 0) return Toast(data.msg)
      if (data.code == 0) {
        Toast('保存成功')
        location.reload()
      }
    },
    // 删除图片
    async initCarManagementCCarFileDelete(params){
      const data = await getCarManagementCCarFileDelete(params);
      if (data.code !== 0) return Toast(data.msg)
      if (data.code == 0) {
        Toast('保存成功')
        location.reload()
      }
    },
    // 取消
    hanldeCancel(){
      this.uploadingbox = true;
      location.reload();
    }
  },
  created() {
    this.filterImage = this.fileImage
    this.fileImageNew = []
    this.fileImageNew.push(...this.fileImage)
    this.lengthImage = this.fileImageNew.length
  },/* 
  watch: {
    fileImageNew(watch){
      console.log('%c [ watch ]-127', 'font-size:13px; background:pink; color:#bf2c9f;', watch)
    }
  }, */
};
</script>

<style scoped lang="less">
.another-file {
  // padding: 16px;
  background-color: white;
  width: 100vw;
  .title {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .file {
    padding: 16px 0 80px 16px;
    width: 100vw;
    background-color: white;
    // height: 60px;
    .flie_box {
      width: 60px;
      height: 60px;
      float: left;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
<style lang="less">
/* .another-file{
  .van-uploader__upload{
    display: none;
  }
} */
</style>